<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Denzel - CSS中的图像处理 —— clip-path</title>
    <meta name="description" content="前端笔记">
    <meta name="keywords" content="web前端,HTML5,CSS3,Javascript,SVG,canvas">
  <meta name="anthor" content="Denzel">
  <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
  <link rel="icon" href="/blog/vuepress/logo.png">
  <link rel="manifest" href="/blog/vuepress/manifest.json">
  <link rel="apple-touch-icon" href="/blog/vuepress/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="/blog/vuepress/icons/safari-pinned-tab.svg" color="#3eaf7c">
    
    <link rel="preload" href="/blog/vuepress/assets/css/0.styles.d4f29607.css" as="style"><link rel="preload" href="/blog/vuepress/assets/js/app.15770e34.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/52.26b971fd.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/63.9ac2b61d.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/65.923a8d15.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/82.b09096b2.js" as="script"><link rel="prefetch" href="/blog/vuepress/assets/js/46.59c0ece7.js"><link rel="prefetch" href="/blog/vuepress/assets/js/1.05e4270f.js"><link rel="prefetch" href="/blog/vuepress/assets/js/2.ace739f7.js"><link rel="prefetch" href="/blog/vuepress/assets/js/3.636e5a79.js"><link rel="prefetch" href="/blog/vuepress/assets/js/4.7a55aa4b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/5.b56b0573.js"><link rel="prefetch" href="/blog/vuepress/assets/js/6.e9a3fbc8.js"><link rel="prefetch" href="/blog/vuepress/assets/js/7.aa46c47d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/8.a9288ac6.js"><link rel="prefetch" href="/blog/vuepress/assets/js/9.b9f8dec6.js"><link rel="prefetch" href="/blog/vuepress/assets/js/10.3e2ea470.js"><link rel="prefetch" href="/blog/vuepress/assets/js/11.4d115f98.js"><link rel="prefetch" href="/blog/vuepress/assets/js/12.c97cf4d0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/13.1e0cf594.js"><link rel="prefetch" href="/blog/vuepress/assets/js/14.bab9026a.js"><link rel="prefetch" href="/blog/vuepress/assets/js/15.1a24cffe.js"><link rel="prefetch" href="/blog/vuepress/assets/js/16.e9995850.js"><link rel="prefetch" href="/blog/vuepress/assets/js/17.86a1f7d2.js"><link rel="prefetch" href="/blog/vuepress/assets/js/18.c32400c4.js"><link rel="prefetch" href="/blog/vuepress/assets/js/19.9f99887c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/20.82f0c2f9.js"><link rel="prefetch" href="/blog/vuepress/assets/js/21.7f5c223d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/22.acf9934c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/23.20d8e817.js"><link rel="prefetch" href="/blog/vuepress/assets/js/24.acf27379.js"><link rel="prefetch" href="/blog/vuepress/assets/js/25.20165510.js"><link rel="prefetch" href="/blog/vuepress/assets/js/26.83a2ddc3.js"><link rel="prefetch" href="/blog/vuepress/assets/js/27.33276a04.js"><link rel="prefetch" href="/blog/vuepress/assets/js/28.e320efab.js"><link rel="prefetch" href="/blog/vuepress/assets/js/29.3fd92c30.js"><link rel="prefetch" href="/blog/vuepress/assets/js/30.2bc84d43.js"><link rel="prefetch" href="/blog/vuepress/assets/js/31.d70ed500.js"><link rel="prefetch" href="/blog/vuepress/assets/js/32.e7a0f8e1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/33.c48ee70b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/34.8ad03d1b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/35.5bdb3994.js"><link rel="prefetch" href="/blog/vuepress/assets/js/36.a25f926e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/37.7515cfbb.js"><link rel="prefetch" href="/blog/vuepress/assets/js/38.99347371.js"><link rel="prefetch" href="/blog/vuepress/assets/js/39.3481fc62.js"><link rel="prefetch" href="/blog/vuepress/assets/js/40.bc709734.js"><link rel="prefetch" href="/blog/vuepress/assets/js/41.e1e0a3bf.js"><link rel="prefetch" href="/blog/vuepress/assets/js/42.762b61b0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/43.8f0b2d6c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/44.2a0a4ee0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/45.baf7ed60.js"><link rel="prefetch" href="/blog/vuepress/assets/js/47.11a8720a.js"><link rel="prefetch" href="/blog/vuepress/assets/js/48.e0bf8b54.js"><link rel="prefetch" href="/blog/vuepress/assets/js/49.c96c4011.js"><link rel="prefetch" href="/blog/vuepress/assets/js/50.31189263.js"><link rel="prefetch" href="/blog/vuepress/assets/js/51.766a8294.js"><link rel="prefetch" href="/blog/vuepress/assets/js/53.0cfbd708.js"><link rel="prefetch" href="/blog/vuepress/assets/js/54.bdc15c87.js"><link rel="prefetch" href="/blog/vuepress/assets/js/55.fea285a9.js"><link rel="prefetch" href="/blog/vuepress/assets/js/56.e030a6b2.js"><link rel="prefetch" href="/blog/vuepress/assets/js/57.bd168a1e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/58.636557fa.js"><link rel="prefetch" href="/blog/vuepress/assets/js/59.5d1d0ce6.js"><link rel="prefetch" href="/blog/vuepress/assets/js/60.0b779f92.js"><link rel="prefetch" href="/blog/vuepress/assets/js/61.4ec3f2eb.js"><link rel="prefetch" href="/blog/vuepress/assets/js/62.8f70f114.js"><link rel="prefetch" href="/blog/vuepress/assets/js/64.c028fad5.js"><link rel="prefetch" href="/blog/vuepress/assets/js/66.73db652e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/67.1a91446d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/68.e5a12a42.js"><link rel="prefetch" href="/blog/vuepress/assets/js/69.6ddcb882.js"><link rel="prefetch" href="/blog/vuepress/assets/js/70.ceb70d85.js"><link rel="prefetch" href="/blog/vuepress/assets/js/71.a804ef40.js"><link rel="prefetch" href="/blog/vuepress/assets/js/72.f1c4098c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/73.2f28b842.js"><link rel="prefetch" href="/blog/vuepress/assets/js/74.571c2ab1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/75.f365c2a1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/76.0916a3cd.js"><link rel="prefetch" href="/blog/vuepress/assets/js/77.469aed17.js"><link rel="prefetch" href="/blog/vuepress/assets/js/78.02cdd59d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/79.44d7f95c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/80.4ca072f1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/81.d9239a49.js"><link rel="prefetch" href="/blog/vuepress/assets/js/83.f4bc8a9b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/84.1ffe6969.js"><link rel="prefetch" href="/blog/vuepress/assets/js/85.44e980f9.js"><link rel="prefetch" href="/blog/vuepress/assets/js/86.c8579ac0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/87.cd49f324.js"><link rel="prefetch" href="/blog/vuepress/assets/js/88.3851b6ff.js"><link rel="prefetch" href="/blog/vuepress/assets/js/89.b05297be.js"><link rel="prefetch" href="/blog/vuepress/assets/js/90.c1e3263e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/91.b493a1bb.js"><link rel="prefetch" href="/blog/vuepress/assets/js/92.80ab06fd.js"><link rel="prefetch" href="/blog/vuepress/assets/js/93.c6ca00b3.js"><link rel="prefetch" href="/blog/vuepress/assets/js/94.e993d310.js"><link rel="prefetch" href="/blog/vuepress/assets/js/95.8e19a7ed.js">
    <link rel="stylesheet" href="/blog/vuepress/assets/css/0.styles.d4f29607.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/blog/vuepress/" class="home-link router-link-active"><img src="/blog/vuepress/hero.png" class="logo"><span class="site-name can-hide">
      Denzel
    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/vuepress/js/" class="nav-link">JS</a></div><div class="nav-item"><a href="/blog/vuepress/css/" class="nav-link router-link-active">CSS</a></div><div class="nav-item"><a href="/blog/vuepress/html/" class="nav-link">HTML</a></div><div class="nav-item"><a href="/blog/vuepress/else/" class="nav-link">其他</a></div><div class="nav-item"><a href="/blog/vuepress/study/" class="nav-link">study</a></div><a href="https://github.com/xiaotianxia" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/vuepress/js/" class="nav-link">JS</a></div><div class="nav-item"><a href="/blog/vuepress/css/" class="nav-link router-link-active">CSS</a></div><div class="nav-item"><a href="/blog/vuepress/html/" class="nav-link">HTML</a></div><div class="nav-item"><a href="/blog/vuepress/else/" class="nav-link">其他</a></div><div class="nav-item"><a href="/blog/vuepress/study/" class="nav-link">study</a></div><a href="https://github.com/xiaotianxia" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>CSS</span><!----></p><ul class="sidebar-group-items"><li><a href="/blog/vuepress/css/" class="sidebar-link">目录</a></li><li><a href="/blog/vuepress/css/svg_path_animation.html" class="sidebar-link">SVG轻松实现路径动画</a></li><li><a href="/blog/vuepress/css/clip_path.html" class="active sidebar-link">CSS中的图像处理 —— clip-path</a></li><li><a href="/blog/vuepress/css/columns.html" class="sidebar-link">Columns —— CSS多栏布局</a></li><li><a href="/blog/vuepress/css/grid_layout.html" class="sidebar-link">Grid —— CSS网格布局初探</a></li><li><a href="/blog/vuepress/css/styled_switch.html" class="sidebar-link">radio和checkbox的自定义样式</a></li><li><a href="/blog/vuepress/css/use_of_checkbox.html" class="sidebar-link">checkbox的应用</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="css中的图像处理-——-clip-path"><a href="#css中的图像处理-——-clip-path" aria-hidden="true" class="header-anchor">#</a> CSS中的图像处理 —— clip-path</h1><p><a href="https://denzel.netlify.com/css/clip_path.html?_=3566625361256782357" target="_blank" rel="noopener noreferrer">原文链接</a></p><h2 id="前言"><a href="#前言" aria-hidden="true" class="header-anchor">#</a> 前言</h2><p>Photoshop中用钢笔工具勾出轮廓，转为选取，然后反选，删去多余部分，最后只留下要选择的区域，
这一波操作想必是懂PS都非常熟悉的了，就像这样：</p><p><img src="http://pn4meizzc.bkt.clouddn.com/clip004.png" alt="不重要的图 small"></p><p>在CSS3中也有思思功能的属性：clip-path。顾名思义：裁剪路径，
该属性可以将方方正正的元素裁剪成几乎任何你想要的形状。</p><p>今天就跟大家一块学习这一操作。</p><p>有一个在线<a href="http://bennettfeely.com/clippy" target="_blank" rel="noopener noreferrer">神器</a>，学习之前先体验一下这个特性吧。</p><h2 id="基本语法"><a href="#基本语法" aria-hidden="true" class="header-anchor">#</a> 基本语法</h2><pre class="language-js"><code>clip<span class="token operator">-</span>path<span class="token punctuation">:</span> <span class="token operator">&lt;</span>clip<span class="token operator">-</span>source<span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token punctuation">[</span> <span class="token operator">&lt;</span>basic<span class="token operator">-</span>shape<span class="token operator">&gt;</span> <span class="token operator">||</span> <span class="token operator">&lt;</span>geometry<span class="token operator">-</span>box<span class="token operator">&gt;</span> <span class="token punctuation">]</span> <span class="token operator">|</span> none

where<span class="token punctuation">:</span>
<span class="token operator">&lt;</span>clip<span class="token operator">-</span>source<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token operator">&lt;</span>url<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>basic<span class="token operator">-</span>shape<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token operator">&lt;</span><span class="token function">inset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span><span class="token function">circle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span><span class="token function">ellipse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span><span class="token function">polygon</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>geometry<span class="token operator">-</span>box<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token operator">&lt;</span>shape<span class="token operator">-</span>box<span class="token operator">&gt;</span> <span class="token operator">|</span> fill<span class="token operator">-</span>box <span class="token operator">|</span> stroke<span class="token operator">-</span>box <span class="token operator">|</span> view<span class="token operator">-</span>box

where<span class="token punctuation">:</span>
<span class="token operator">&lt;</span>url<span class="token operator">&gt;</span> <span class="token operator">=</span> svg引用
<span class="token operator">&lt;</span><span class="token function">inset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">inset</span><span class="token punctuation">(</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">}</span> <span class="token punctuation">[</span> round <span class="token operator">&lt;</span>border<span class="token operator">-</span>radius<span class="token operator">&gt;</span> <span class="token punctuation">]</span><span class="token operator">?</span> <span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token function">circle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">circle</span><span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token operator">&lt;</span>shape<span class="token operator">-</span>radius<span class="token operator">&gt;</span> <span class="token punctuation">]</span><span class="token operator">?</span> <span class="token punctuation">[</span> at <span class="token operator">&lt;</span>position<span class="token operator">&gt;</span> <span class="token punctuation">]</span><span class="token operator">?</span> <span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token function">ellipse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">ellipse</span><span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token operator">&lt;</span>shape<span class="token operator">-</span>radius<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token operator">?</span> <span class="token punctuation">[</span> at <span class="token operator">&lt;</span>position<span class="token operator">&gt;</span> <span class="token punctuation">]</span><span class="token operator">?</span> <span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token function">polygon</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">polygon</span><span class="token punctuation">(</span> <span class="token operator">&lt;</span>fill<span class="token operator">-</span>rule<span class="token operator">&gt;</span><span class="token operator">?</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token punctuation">]</span># <span class="token punctuation">)</span>
<span class="token operator">&lt;</span>shape<span class="token operator">-</span>box<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token operator">&lt;</span>box<span class="token operator">&gt;</span> <span class="token operator">|</span> margin<span class="token operator">-</span>box

where<span class="token punctuation">:</span>
<span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token operator">&lt;</span>length<span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span>percentage<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>shape<span class="token operator">-</span>radius<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token operator">|</span> closest<span class="token operator">-</span>side <span class="token operator">|</span> farthest<span class="token operator">-</span>side
<span class="token operator">&lt;</span>position<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> left <span class="token operator">|</span> center <span class="token operator">|</span> right <span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[</span> top <span class="token operator">|</span> center <span class="token operator">|</span> bottom <span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token punctuation">[</span> left <span class="token operator">|</span> center <span class="token operator">|</span> right <span class="token operator">|</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> top <span class="token operator">|</span> center <span class="token operator">|</span> bottom <span class="token operator">|</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token punctuation">]</span><span class="token operator">?</span> <span class="token operator">|</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> left <span class="token operator">|</span> right <span class="token punctuation">]</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> top <span class="token operator">|</span> bottom <span class="token punctuation">]</span> <span class="token operator">&lt;</span>length<span class="token operator">-</span>percentage<span class="token operator">&gt;</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span>
<span class="token operator">&lt;</span>fill<span class="token operator">-</span>rule<span class="token operator">&gt;</span> <span class="token operator">=</span> nonzero <span class="token operator">|</span> evenodd
<span class="token operator">&lt;</span>box<span class="token operator">&gt;</span> <span class="token operator">=</span> border<span class="token operator">-</span>box <span class="token operator">|</span> padding<span class="token operator">-</span>box <span class="token operator">|</span> content<span class="token operator">-</span>box
</code></pre><p>矮马，看着是不是眼花缭乱的....下面就试着通过demo展开学一下~</p><div class="warning custom-block"><p class="custom-block-title">提示</p><p>Demo说明：图片中的半透明是额外的元素，用来做参考的，实际的剪切效果中不会出现。</p></div><h3 id="clip-source"><a href="#clip-source" aria-hidden="true" class="header-anchor">#</a> clip-source</h3><p>适应于SVG，即定义了clipPath的SVG元素</p><pre class="language-css"><code><span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token url">url(#c1)</span><span class="token punctuation">;</span> <span class="token comment">/*可以使本页的内联SVG*/</span>
<span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token url">url(resources.svg#c1)</span><span class="token punctuation">;</span> <span class="token comment">/*还可以是远程的SVG*/</span>
</code></pre><p>SVG形状灵活，可以是各种不规则图形，甚至可以是文字，像这样：</p><p><img src="http://pn4meizzc.bkt.clouddn.com/clip010.png" alt="small demo"></p><p>甚至这样：</p><p><img src="http://pn4meizzc.bkt.clouddn.com/clip011.png" alt="small demo"></p><p>可跳到demo页查看。</p><div class="spreadown-wrapper" data-v-ba9b4902><div class="spreadown-content" data-v-ba9b4902><iframe height="300" scrolling="no" title="svg" src="//codepen.io/_tianxia/embed/JZgWBN/?height=300&amp;theme-id=33504&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="allowfullscreen" style="width:100%;" data-v-ba9b4902>See the Pen <a href="https://codepen.io/_tianxia/pen/JZgWBN/" data-v-ba9b4902>svg</a> by Denzel (<a href="https://codepen.io/_tianxia" data-v-ba9b4902>@_tianxia</a>) on <a href="https://codepen.io" data-v-ba9b4902>CodePen</a>.</iframe><div class="codepen-wrapper"><a href="https://codepen.io/_tianxia/pen/JZgWBN/" target="_blank" class="el-button el-button--primary is-plain">show in codepen <i class="el-icon-d-arrow-right"></i></a></div></div><div class="spreadown-trigger" data-v-ba9b4902><i class="el-icon-arrow-right" data-v-ba9b4902></i><span class="text" style="display:;" data-v-ba9b4902>点击展开</span><span class="text" style="display:none;" data-v-ba9b4902>点击隐藏</span></div></div><p>SVG不太了解以后再好好学吧，熟悉SVG同学可以多试试其他的形状。</p><h3 id="basic-shape"><a href="#basic-shape" aria-hidden="true" class="header-anchor">#</a> basic-shape</h3><h4 id="inset"><a href="#inset" aria-hidden="true" class="header-anchor">#</a> inset()</h4><div class="tip custom-block"><p class="custom-block-title">tip</p><p>inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。</p></div><pre class="language-css"><code><span class="token selector">inset( &lt;length-percentage&gt;</span><span class="token punctuation">{</span>1,4<span class="token punctuation">}</span> [ round &lt;border-radius&gt; ]? <span class="token punctuation">)</span>
</code></pre><p>inset()可以传入5个参数，分别对应top，right，bottom，left的裁剪位置，round radius（可选，圆角），参数之间用空格隔开。</p><p><img src="http://pn4meizzc.bkt.clouddn.com/blog/clip005.png" alt="small demo"><div class="spreadown-wrapper" data-v-ba9b4902><div class="spreadown-content" data-v-ba9b4902><iframe height="310" scrolling="no" title="1" src="//codepen.io/_tianxia/embed/dKxNgM/?height=310&amp;theme-id=33504&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="allowfullscreen" style="width:100%;" data-v-ba9b4902>See the Pen <a href="https://codepen.io/_tianxia/pen/dKxNgM/" data-v-ba9b4902>1</a> by Denzel (<a href="https://codepen.io/_tianxia" data-v-ba9b4902>@_tianxia</a>) on <a href="https://codepen.io" data-v-ba9b4902>CodePen</a>.</iframe><div class="codepen-wrapper"><a href="https://codepen.io/_tianxia/pen/dKxNgM/" target="_blank" class="el-button el-button--primary is-plain">show in codepen <i class="el-icon-d-arrow-right"></i></a></div></div><div class="spreadown-trigger" data-v-ba9b4902><i class="el-icon-arrow-right" data-v-ba9b4902></i><span class="text" style="display:;" data-v-ba9b4902>点击展开</span><span class="text" style="display:none;" data-v-ba9b4902>点击隐藏</span></div></div></p><h4 id="circle"><a href="#circle" aria-hidden="true" class="header-anchor">#</a> circle()</h4><p>定义圆形</p><pre class="language-css"><code><span class="token function">circle</span><span class="token punctuation">(</span> [ &lt;shape-radius&gt; ]? [ at &lt;position&gt; ]? <span class="token punctuation">)</span>
</code></pre><p>circle()可以传人2个可选参数；</p><ol><li><p>圆的半径，默认值min(元素宽,元素高)/ 2，支持百分比</p></li><li><p>圆心位置，默认为元素中心点</p></li></ol><p>半径公式：如果半径使用百分比：圆的半径 = (sqrt(width^2 + height^2) / sqrt(2)) * 百分比</p><p><img src="http://pn4meizzc.bkt.clouddn.com/blog/clip006.png" alt="small demo"><div class="spreadown-wrapper" data-v-ba9b4902><div class="spreadown-content" data-v-ba9b4902><iframe height="300" scrolling="no" title="2" src="//codepen.io/_tianxia/embed/ZRgeKE/?height=300&amp;theme-id=33504&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="allowfullscreen" style="width:100%;" data-v-ba9b4902>See the Pen <a href="https://codepen.io/_tianxia/pen/ZRgeKE/" data-v-ba9b4902>2</a> by Denzel (<a href="https://codepen.io/_tianxia" data-v-ba9b4902>@_tianxia</a>) on <a href="https://codepen.io" data-v-ba9b4902>CodePen</a>.</iframe><div class="codepen-wrapper"><a href="https://codepen.io/_tianxia/pen/ZRgeKE/" target="_blank" class="el-button el-button--primary is-plain">show in codepen <i class="el-icon-d-arrow-right"></i></a></div></div><div class="spreadown-trigger" data-v-ba9b4902><i class="el-icon-arrow-right" data-v-ba9b4902></i><span class="text" style="display:;" data-v-ba9b4902>点击展开</span><span class="text" style="display:none;" data-v-ba9b4902>点击隐藏</span></div></div></p><h4 id="ellipse"><a href="#ellipse" aria-hidden="true" class="header-anchor">#</a> ellipse()</h4><p>定义椭圆</p><pre class="language-css"><code><span class="token selector">ellipse( [ &lt;shape-radius&gt;</span><span class="token punctuation">{</span>2<span class="token punctuation">}</span> ]? [ at &lt;position&gt; ]? <span class="token punctuation">)</span>
</code></pre><p>ellipse()可以传人3个可选参数；</p><ol><li><p>椭圆的X轴半径，默认是宽度的一半，支持百分比</p></li><li><p>椭圆的Y轴半径，默认是高度的一半，支持百分比</p></li><li><p>椭圆中心位置，默认是元素的中心点</p></li></ol><p><img src="http://pn4meizzc.bkt.clouddn.com/blog/clip007.png" alt="small demo"><div class="spreadown-wrapper" data-v-ba9b4902><div class="spreadown-content" data-v-ba9b4902><iframe height="300" scrolling="no" title="3" src="//codepen.io/_tianxia/embed/oyKZwW/?height=300&amp;theme-id=33504&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="allowfullscreen" style="width:100%;" data-v-ba9b4902>See the Pen <a href="https://codepen.io/_tianxia/pen/oyKZwW/" data-v-ba9b4902>3</a> by Denzel (<a href="https://codepen.io/_tianxia" data-v-ba9b4902>@_tianxia</a>) on <a href="https://codepen.io" data-v-ba9b4902>CodePen</a>.</iframe><div class="codepen-wrapper"><a href="https://codepen.io/_tianxia/pen/oyKZwW/" target="_blank" class="el-button el-button--primary is-plain">show in codepen <i class="el-icon-d-arrow-right"></i></a></div></div><div class="spreadown-trigger" data-v-ba9b4902><i class="el-icon-arrow-right" data-v-ba9b4902></i><span class="text" style="display:;" data-v-ba9b4902>点击展开</span><span class="text" style="display:none;" data-v-ba9b4902>点击隐藏</span></div></div></p><h4 id="polygon"><a href="#polygon" aria-hidden="true" class="header-anchor">#</a> polygon()</h4><p>定义多边形</p><pre class="language-css"><code><span class="token function">polygon</span><span class="token punctuation">(</span> &lt;fill-rule&gt;? , [ &lt;length-percentage&gt; &lt;length-percentage&gt; ]# <span class="token punctuation">)</span>
</code></pre><p>fill-rule可选，表示填充规则，用来确定该多边形的内部。可能的值有nonzero和evenodd，默认值是nonzero。
有点拓扑学的意思，详见<a href="https://www.w3.org/TR/css-masking/#the-clip-rule" target="_blank" rel="noopener noreferrer">这里</a>。
(这个属性现在的浏览器还没支持)</p><p>后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点</p><p><img src="http://pn4meizzc.bkt.clouddn.com/blog/clip008.png" alt="small demo"><div class="spreadown-wrapper" data-v-ba9b4902><div class="spreadown-content" data-v-ba9b4902><iframe height="300" scrolling="no" title="polygon" src="//codepen.io/_tianxia/embed/rKXyzV/?height=300&amp;theme-id=33504&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="allowfullscreen" style="width:100%;" data-v-ba9b4902>See the Pen <a href="https://codepen.io/_tianxia/pen/rKXyzV/" data-v-ba9b4902>polygon</a> by Denzel (<a href="https://codepen.io/_tianxia" data-v-ba9b4902>@_tianxia</a>) on <a href="https://codepen.io" data-v-ba9b4902>CodePen</a>.</iframe><div class="codepen-wrapper"><a href="https://codepen.io/_tianxia/pen/rKXyzV/" target="_blank" class="el-button el-button--primary is-plain">show in codepen <i class="el-icon-d-arrow-right"></i></a></div></div><div class="spreadown-trigger" data-v-ba9b4902><i class="el-icon-arrow-right" data-v-ba9b4902></i><span class="text" style="display:;" data-v-ba9b4902>点击展开</span><span class="text" style="display:none;" data-v-ba9b4902>点击隐藏</span></div></div></p><h3 id="geometry-box"><a href="#geometry-box" aria-hidden="true" class="header-anchor">#</a> geometry-box</h3><p>可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子，其值可以使shape-box、fill、stroke或者view-box。</p><p>其中shape-box应用于HTML元素，它具有四种值：margin-box、border-box、padding-box和content-box；fill、stroke或者view-box应用于SVG。
详见<a href="https://www.w3.org/TR/css-masking/#typedef-geometry-box" target="_blank" rel="noopener noreferrer">这里</a></p><p>好吧。。。浏览器暂未支持😂。</p><h2 id="demo"><a href="#demo" aria-hidden="true" class="header-anchor">#</a> Demo</h2><p>照着老虎画了个猫😼——
<div class="clipPath-wrapper" data-v-7f7f5f3d><div class="reference" data-v-7f7f5f3d></div><div class="display" style="clip-path:polygon(50% 0%, 0% 100%, 100% 100%);-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);" data-v-7f7f5f3d></div><div class="operate-wrapper" data-v-7f7f5f3d><ul data-v-7f7f5f3d><li data-v-7f7f5f3d><input id="r1" value="r1" type="radio" checked="checked" data-v-7f7f5f3d><label for="r1" style="background-color: tomato;-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r2" value="r2" type="radio" data-v-7f7f5f3d><label for="r2" style="background-color: #3cb371;-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r3" value="r3" type="radio" data-v-7f7f5f3d><label for="r3" style="background-color: orchid;-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r4" value="r4" type="radio" data-v-7f7f5f3d><label for="r4" style="background-color: #db7093;-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r5" value="r5" type="radio" data-v-7f7f5f3d><label for="r5" style="background-color: #32cd32;-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r6" value="r6" type="radio" data-v-7f7f5f3d><label for="r6" style="background-color: #ffb142;-webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r7" value="r7" type="radio" data-v-7f7f5f3d><label for="r7" style="background-color: #786fa6;-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r8" value="r8" type="radio" data-v-7f7f5f3d><label for="r8" style="background-color: #f19066;-webkit-clip-path: circle(39.0% at 50% 50%);clip-path: circle(39.0% at 50% 50%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r8" value="r8" type="radio" data-v-7f7f5f3d><label for="r8" style="background-color: #40407a;-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r8" value="r8" type="radio" data-v-7f7f5f3d><label for="r8" style="background-color: #218c74;-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r9" value="r9" type="radio" data-v-7f7f5f3d><label for="r9" style="background-color: #e84393;-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r11" value="r11" type="radio" data-v-7f7f5f3d><label for="r11" style="background-color: #ffb142;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r10" value="r10" type="radio" data-v-7f7f5f3d><label for="r10" style="background-color: #cd6133;-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);" data-v-7f7f5f3d></label></li><li data-v-7f7f5f3d><input id="r11" value="r11" type="radio" data-v-7f7f5f3d><label for="r11" style="background-color: #ffb142;-webkit-clip-path: polygon(47% 6%, 8% 33%, 18% 79%, 61% 49%, 85% 22%, 84% 66%);clip-path: polygon(47% 6%, 8% 33%, 18% 79%, 61% 49%, 85% 22%, 84% 66%);" data-v-7f7f5f3d></label></li></ul></div><div class="code-wrapper" data-v-7f7f5f3d><pre class="language-css" data-v-7f7f5f3d>			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		</pre></div></div></p><div class="warning custom-block"><p class="custom-block-title">注意</p><p>根据Masking规范，鼠标事件在图形的clipped-out区域外是无效的。</p><p>因此demo中未剪切到的部分是不响应点击的。</p></div><h2 id="参考资料"><a href="#参考资料" aria-hidden="true" class="header-anchor">#</a> 参考资料</h2><ul><li><a href="https://www.w3.org/TR/css-masking/#the-clip-path" target="_blank" rel="noopener noreferrer">CSS Masking Module Level 1</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" target="_blank" rel="noopener noreferrer">clip-path</a></li><li><a href="https://segmentfault.com/a/1190000010936207" target="_blank" rel="noopener noreferrer">不可思议的CSS之clip-path</a></li><li><a href="http://bennettfeely.com/clippy/" target="_blank" rel="noopener noreferrer">CSS clip-path maker</a></li></ul></div><div class="wx-wrapper" data-v-0de8a4bf><p class="wx-txt" data-v-0de8a4bf>欢迎关注</p><img src="http://pn4meizzc.bkt.clouddn.com/wxqr.png" class="wx-img" data-v-0de8a4bf></div><div class="beg-wrapper" data-v-1f1af99c><a href="javascript:;" class="btn show" data-v-1f1af99c><img src="http://pn4meizzc.bkt.clouddn.com/blogshang_log.png" data-v-1f1af99c></a><p class="shang-txt" data-v-1f1af99c>赏不赏，看您心情</p><img src="http://pn4meizzc.bkt.clouddn.com/blogWechatIMG35.jpeg" class="shangImg" data-v-1f1af99c></div><!----><div class="content page-nav"><p class="inner"><span class="prev">
        ← <a href="/blog/vuepress/css/svg_path_animation.html" class="prev">
          SVG轻松实现路径动画
        </a></span><span class="next"><a href="/blog/vuepress/css/columns.html">
          Columns —— CSS多栏布局
        </a> →
      </span></p></div></div></div></div>
    <script src="/blog/vuepress/assets/js/52.26b971fd.js" defer></script><script src="/blog/vuepress/assets/js/63.9ac2b61d.js" defer></script><script src="/blog/vuepress/assets/js/65.923a8d15.js" defer></script><script src="/blog/vuepress/assets/js/82.b09096b2.js" defer></script><script src="/blog/vuepress/assets/js/app.15770e34.js" defer></script>
  </body>
</html>
